<template>
    <div v-if="browserRedirect">
        <div class="boxSty2">
            <div class="font1Sty">门店申请信息管理</div>
            <div style='color:#888;'>这里主要是处理店家在小程序端提交的申请。发行方有权限对该申请进行通 过和拒绝。</div>
            <div style='color:#888;margin-top:20px;'>点击下图红框处【门店申请信息管理】，界面跳转到该界面。查看店家在小程序端的申请信息。</div>
            <img style="width:100%;margin-bottom: 20px;margin-top:30px;" src="../../assets/fxf_21.png" alt="">
        </div>
    </div>
    <div v-else style="display: flex;">
        <a-menu
        style="width: 18%;"
        v-model="keyVal"
        mode="inline"
        theme="light"
        >
            <a-menu-item key="1">
                完善发行工作室信息
            </a-menu-item>
            <a-menu-item key="2">
                添加子账户
            </a-menu-item>
            <a-menu-item key="3">
                添加剧本
            </a-menu-item>
            <a-menu-item key="4">
                添加批次
            </a-menu-item>
            <a-menu-item key="5">
                申请正版码
            </a-menu-item>
            <a-menu-item key="6">
                正版码申请进度
            </a-menu-item>
            <a-menu-item key="7">
                正版剧本绑定概览
            </a-menu-item>
            <a-menu-item key="8">
                门店申请信息管理
            </a-menu-item>
            <a-menu-item key="9">
                店铺信息总览
            </a-menu-item>
            <a-menu-item key="10">
                举报投诉管理
            </a-menu-item>
        </a-menu>
        <div v-if="keyVal==1" class="boxSty">
            <div class="font1Sty">完善发行工作室信息</div>
            <div>第一步：点击下图红框处【完善信息】按钮，进入“发行方工作室信息管理-工 作室信息”。</div>
            <img style="width:82%;margin-bottom: 20px;" src="../../assets/fxf_1.png" alt="">
            <div>第二步：正确填写“发行方工作室信息管理-工作室信息”界面基础信息页。</div>
            <div>发行方账号：输入数字、字母</div>
            <div>如：ha123或Hao123</div>
            <div>企业介绍：输入汉字、数字、字母</div>
            <div>如：世界 500 强企业</div>
            <div>联系人：输入汉字、字母</div>
            <div>如：叶先生</div>
            <div>经营地址：输入汉字、字母、数字</div>
            <div>如：陕西西安某某大厦</div>
            <div>联系电话：正确电话号码</div>
            <div>头像：上传不大于 100k 的 jpg/png 格式图片</div>
            <div>点击【提交】按钮，等待管理员进行审核。</div>
            <img style="width:82%;margin-bottom: 20px;" src="../../assets/fxf_2.png" alt="">
        </div>
        <div v-if="keyVal==2" class="boxSty">
            <div class="font1Sty">添加子账户</div>
            <div>第一步：进入发行方工作室信息管理-子账户管理，点击下图红框处【新增】按 钮，弹窗显示、新增发行方 子店家界面。</div>
            <img style="width:82%;margin-bottom: 20px;" src="../../assets/fxf_3.png" alt="">
            <div>第二步：正确填写创建人账号，默认密码 lm@123456</div>
            <div>填写完成后，点击【确认】按钮，添加的发行方子店家会自动显示在列表中。</div>
            <img style="width:82%;margin-bottom: 20px;" src="../../assets/fxf_4.png" alt="">
        </div>
        <div v-if="keyVal==3" class="boxSty">
            <div class="font1Sty">添加剧本</div>
            <div>进入首页，点击下图红框处【添加剧本】按钮，或进入“链码管理”点击【正版剧本信息管理】按钮，再点击【工作室剧本概况】，进入添加剧本界面，点击【剧本登记】按钮，进行添加剧本。</div>
            <img style="width:82%;margin-bottom: 20px;" src="../../assets/fxf_5.png">
            <img style="width:82%;margin-bottom: 20px;" src="../../assets/fxf_6.png">
            <div>第二步：正确输入基础信息页所有字段。</div>
            <div>剧本名称：输入15位字符以内汉字、字母 如：海贼王</div>
            <div>批次：输入15位字符以内字符 如：AC-1</div>
            <div>总量：只能输入数字最多100</div>
            <div>零售价格：仅支持数字，小数点后两位 如：199.99</div>
            <div>正式发行时间：选择时间</div>
            <div>点击【下一步】</div>
            <img style="width:82%;margin-bottom: 20px;" src="../../assets/fxf_7.png">
            <div>第三步：界面进入“剧本详情页”，正确填写内容</div>
            <div>剧本人数：根据剧本创意设置剧本最佳的游玩人数请</div>
            <div>剧本介绍：最多输入 300 字符</div>
            <div>一句话简介：最多输入15字符，请店家仔细斟酌填写</div>
            <div>剧本实景：根据剧本是否实景进行勾选</div>
            <div>剧本形式：勾选前三个中的一个和后三个中的一个</div>
            <div>剧本类型：勾选你的剧本类型，可多选</div>
            <div>剧本难度：勾选你的剧本难度</div>
            <div>游戏时长：填写你的游戏时长，以小时为单位</div>
            <div>道具支持：选择是否有道具</div>
            <div>剧本供应买断状态：勾选供应状态</div>
            <div>标签：设置该剧本的其他特性优点，最多添加四个</div>
            <div>点击【下一步】按钮</div>
            <img style="width:82%;margin-bottom: 20px;" src="../../assets/fxf_8.png">
            <div>第四步：进入到“资料上传”界面。 只能上传照片格式为 100k 的 jpg，png</div>
            <div>产品实拍图：第一张图片做为剧本图片，最多3张。必填</div>
            <div>剧本海报：最多上传3张图片，必填</div>
            <div>人物海报：最多上传3张图片，选填</div>
            <div>道具资料：最多上传3张图片，选填</div>
            <div>上传成功后，点击【提交】按钮。</div>
            <div>添加成功后，该商品会显示在“首页”在售商品总览处。</div>
            <img style="width:82%;margin-bottom: 20px;" src="../../assets/fxf_9.png">
        </div>
        <div v-if="keyVal==4" class="boxSty">
            <div class="font1Sty">添加批次</div>
            <div>第一步：进入首页，点击下图红框处【增加批次】按钮</div>
            <img style="width:82%;margin-bottom: 20px;" src="../../assets/fxf_10.png" alt="">
            <div>或者进入“正版剧本信息管理-工作室剧本概览”界面，点击【增加批次】按 钮</div>
            <img style="width:82%;margin-bottom: 20px;" src="../../assets/fxf_11.png" alt="">
            <div>第二步：点击后，打开添加批次弹窗，输入批次号和总量，点击确认。</div>
            <img style="width:82%;margin-bottom: 20px;" src="../../assets/fxf_12.png" alt="">
            <div>第三步：添加成功后，显示在首页在售商品总览处。新批次的商品可以继续申请二维码。</div>
            <img style="width:82%;margin-bottom: 20px;" src="../../assets/fxf_13.png" alt="">
        </div>
        <div v-if="keyVal==5" class="boxSty">
            <div class="font1Sty">申请正版码</div>
            <div>第一步：进入首页，点击下图红框处【申请正版码】按钮。弹窗显示“申请” 界面。</div>
            <img style="width:82%;margin-bottom: 20px;" src="../../assets/fxf_14.png" alt="">
            <div>第二步：在“申请”界面，选填备注和上传图片后，点击提交。提交成功后，该条申请将发送给管理员进行审批。</div>
            <img style="width:82%;margin-bottom: 20px;" src="../../assets/fxf_15.png" alt="">
        </div>
        <div v-if="keyVal==6" class="boxSty">
            <div class="font1Sty">正版码申请进度</div>
            <div>进入“链码管理-正版剧本信息管理”，点击【正版码申请进度管理】后，界面显示审批进度列表，可查看你申请的二维码是否通过或者被拒绝。</div>
            <img style="width:82%;margin-bottom: 20px;" src="../../assets/fxf_16.png" alt="">
        </div>
        <div v-if="keyVal==7" class="boxSty">
            <div class="font1Sty">正版剧本绑定概览</div>
            <div>当管理员将你申请的二维码审批通过后，这里显示该商品的所有二维码。并可以详细查看该商品的绑定的店家信息。</div>
            <img style="width:82%;margin-bottom: 20px;" src="../../assets/fxf_17.png">
        </div>
        <div v-if="keyVal==8" class="boxSty">
            <div class="font1Sty">门店申请信息管理</div>
            <div>这里主要是处理店家在小程序端提交的申请。发行方有权限对该申请进行通 过和拒绝。</div>
            <div>点击下图红框处【门店申请信息管理】，界面跳转到该界面。查看店家在小程序端的申请信息。</div>
            <img style="width:82%;margin-bottom: 20px;" src="../../assets/fxf_18.png">
        </div>
        <div v-if="keyVal==9" class="boxSty">
            <div class="font1Sty">店铺信息总览</div>
            <div>该界面显示所以绑定该发行方商品的店家信息。</div>
            <img style="width:82%;margin-bottom: 20px;" src="../../assets/fxf_19.png">
        </div>
        <div v-if="keyVal==10" class="boxSty">
            <div class="font1Sty">举报投诉管理</div>
            <div>该界面显示玩家对店家的所有的举报信息。</div>
            <img style="width:82%;margin-bottom: 20px;" src="../../assets/fxf_20.png">
        </div>
    </div>
</template>
<script>
    import { browserRedirect } from '@/utils/util'  
    export default {
      name: "handlingInstruction",
      components: { 
      },
      data () {
        return {
            browserRedirect:false,
            keyVal:"1"
        }
      },
      mounted() {
          this.browserRedirect = browserRedirect();
      },
      methods: {
      }
    }
  </script>
  <style lang="scss" scoped>
      .boxSty{
        width:82%;
        overflow-y: scroll;
        background: #fff;
        padding:15px 50px;
        height:calc(100vh - 130px);
        div{
            margin-bottom: 20px;
            font-size:16px;
        }
      }
      .boxSty2{
        width:100%;
        background: #fff;
        padding:15px 20px;
      }
      .font1Sty{
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 30px;
      }
  </style>